<template>
    <div style="padding:30px;">
    <el-form :inline="true" :model="form" class="demo-form-inline">
      <el-form-item label="客户编号">
        <el-input v-model="form.cusName" clearable placeholder="客户编号"></el-input>
      </el-form-item>
      <el-form-item label="客户名">
        <el-input v-model="form.contacts" clearable placeholder="客户名"></el-input>
      </el-form-item>
      <el-form-item label="手机号">
        <el-input v-model="form.phone" clearable placeholder="手机号"></el-input>
      </el-form-item>
      <el-form-item label="客户状态">
        <el-select v-model="form.state" clearable clearable placeholder="请选择">
          <el-option label="正常" value="1"></el-option>
          <el-option label="停用" value="0"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form>

    <el-row type="flex" class="row-bg">
      <el-col :span="20">
        <div class="grid-content bg-purple-light">
          <el-col :span="3"><el-button plain size="small" icon="el-icon-plus" type="primary" @click="adds()">新增</el-button></el-col>
          <el-table ref="filterTable" :data="tableData" style="width: 100%">
            <el-table-column prop="customerId" label="序号" >
            </el-table-column>
            <el-table-column prop="cusName" label="客户编号" >
            </el-table-column>
            <el-table-column prop="contacts" label="客户名">
            </el-table-column>
            <el-table-column prop="phone" label="手机号">
            </el-table-column>
            <el-table-column prop="address"  label="地址">
            </el-table-column>
            <el-table-column prop="cardNo" label="银行卡号">
            </el-table-column>
             <el-table-column prop="state" label="状态">
             <template slot-scope="scope">
                <el-tag :type="scope.row.state == '0' ? 'danger' : 'primary'" disable-transitions>
                {{scope.row.state==0?'停用':'正常'}}</el-tag>
              </template>
            </el-table-column>
            <el-table-column fixed="right" align="center" label="操作" width="150px">
              <template slot-scope="scope">
                <el-button @click="update(scope.row)" type="text" icon="el-icon-edit" size="small">编辑</el-button>
                <el-button @click="del(scope.row)" type="text" icon="el-icon-delete" size="mini">删除</el-button>
              </template>
            </el-table-column>
          </el-table>

          <div class="block">
            <el-tag class="demonstration">调整每页显示条数</el-tag>
            <el-pagination
             background layout="sizes,prev, pager, next"
             :total="count"
             :page-sizes="[3, 4, 5, 6]"
              :page-size="3"
               @current-change="getAllByLimit"
                @size-change="handleSizeChange">
            </el-pagination>
          </div>
        </div>
      </el-col>
    </el-row>

            <el-dialog title="新增客户" :visible.sync="addshow">
            <el-form :model="addform" status-icon :rules="rules" ref="addform" label-width="80px">
              <el-form-item label="客户编号" prop="cusName">
              <el-input v-model="addform.cusName" placeholder="客户编号" maxlength="6" ></el-input>
              </el-form-item>
                <el-form-item label="客户名" prop="contacts">
                <el-input v-model="addform.contacts" placeholder="客户名"></el-input>
                </el-form-item>
                <el-form-item label="手机号" prop="phone">
                <el-input type="text" v-model="addform.phone" maxlength="11"></el-input>
                </el-form-item>
              <el-form-item label="地址">
                <el-input v-model="addform.address" placeholder="地址"></el-input>
              </el-form-item>
              <el-form-item label="银行卡号">
               <el-input v-model="addform.cardNo" placeholder="银行卡号"></el-input>
               </el-form-item>
                <el-form-item label="状态">
                  <el-select v-model="addform.state" clearable placeholder="请选择客户状态">
                    <el-option label="正常" value="1"></el-option>
                    <el-option label="停用" value="0"></el-option>
                  </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="pushs('addform')">提 交</el-button>
                <el-button  @click="err()">取 消</el-button>
            </div>
            </el-dialog>

            <el-dialog title="修改客户" :visible.sync="setshow">
            <el-form :model="setform">
                   <el-form-item label="客户编号">
                   <el-input v-model="setform.cusName" placeholder="客户编号"></el-input>
                   </el-form-item>
                   <el-form-item label="客户名">
                   <el-input v-model="setform.contacts" placeholder="客户名"></el-input>
                   </el-form-item>
                   <el-form-item label="手机号" prop="phone">
                   <el-input type="text" v-model="setform.phone"></el-input>
                   </el-form-item>
                 <el-form-item label="地址">
                   <el-input v-model="setform.address" placeholder="地址"></el-input>
                 </el-form-item>
                 <el-form-item label="银行卡号">
                  <el-input v-model="setform.cardNo" placeholder="银行卡号"></el-input>
                   </el-form-item>
                   <el-form-item label="状态">
                     <el-select v-model="setform.state" clearable placeholder="请选择客户状态">
                       <el-option label="正常" value="1"></el-option>
                       <el-option label="停用" value="0"></el-option>
                     </el-select>
                   </el-form-item>
               <el-input v-model="setform.customerId" type="hidden"></el-input>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="setpush()">提 交</el-button>
                <el-button  @click="err()">取 消</el-button>
            </div>
            </el-dialog>
  </div>
</template>

<script>
  import {getAll,set,del,add} from '@/api/customer.js'

  export default {
    data() {
         var validatePhone = (rule,value,callback)=>{
           /*console.log(rule);
           console.log(value);
           console.log(callback);*/
           if (!value){
             callback(new Error('手机号不能为空！'));
           }
           //使用正则表达式进行验证手机号码
           if (!/^1[3456789]\d{9}$/.test(value)){
             callback(new Error('请输入正确手机号！'));
           }
         };


      return {
        //分页查询
        form: {
          cusName:'',
           contacts: '',
           phone:'',
           state:''
        },
        //分页
        page: 1,
        limit: 3,
        tableData: [],
        count: 4,
        addshow:false,
        //添加
        addform: {
          cusName:'',
           contacts: '',
           phone:'',
           address:'',
           cardNo:'',
            state: ''
        },
        setshow:false,
        setform: {
          customerId:'',
          cusName:'',
         contacts: '',
         phone:'',
         address:'',
         cardNo:'',
          state:''
        },

        rules: {
           cusName:[
          { required: true,  message: "用户编号必须是6位整数", len: 6, trigger: "blur" }
        ],
        contacts: [
          { required: true, message: "客户名称不能为空", trigger: "blur" },
          { min: 2, max: 20, message: '客户名称长度必须介于 2 和 20 之间', trigger: 'blur' }
        ],
         //自定义验证规则

          phone: [
            { required: true, message: '请输入手机号', trigger: 'blur' }/* ,
            { validator: validatePhone, trigger: 'blur' } */
          ],
        }
      }
    },
    created() {
      this.getAllByLimit(1);
    },
    methods: {
      //分页查询所有
      getAllByLimit(val) { // 修改当前页所触发的函数
        return new Promise((resolve, reject) => {
          getAll({'limit': this.limit,'page': val}).then(response => {
            const {data,count} = response
            this.tableData = data;
            this.count = count;
            resolve()
          }).catch(error => {
            reject(error)
          })
        })
      },
      //当limit修改时分页查询所有
      handleSizeChange(val){
          return new Promise((resolve, reject) => {
            getAll({'limit': val,'page': 1}).then(response => {
              const {data,count} = response
              this.tableData = data;
              resolve()
            }).catch(error => {
              reject(error)
            })
          })
      },
      //模糊查询表单提交
      onSubmit() {
        return new Promise((resolve, reject) => {
          getAll({
            'limit': this.limit,
            'page': this.page,
             'cusName': this.form.cusName,
            'contacts':this.form.contacts,
            'phone':this.form.phone,
             'state': this.form.state
          }).then(response => {
            const {data,count} = response
            this.tableData = data;
            this.count = count;
            resolve()
          }).catch(error => {
            reject(error)
          })
        })
      },
      //添加按钮事件
       adds(){
            this.addshow=true;
      },
     //取消让弹框隐藏
      err(){
            this.addshow=false;
            this.setshow=false;
      },
      update(row){
          this.setshow=true;
          this.setform=row;
          this.setform.state=row.state;
      },
      //提交添加
      pushs(formName) {
        //表单验证方法
        this.$refs[formName].validate((valid) => {
          if (valid) {
        return new Promise((resolve, reject) => {
          add({
            'cusName': this.addform.cusName,
            'contacts':this.addform.contacts,
             'phone' :this.addform.phone,
             'address' :this.addform.address,
            //'qrCode' :this.addform.qrCode,
             'cardNo' :this.addform.cardNo,
             'state': this.addform.state
          }).then(response => {
            if(response.data){
              this.$message({
                  message: response.msg,
                 type: 'success',
                 duration: 1500,
                 onClose:  () =>{
                   location.reload();
                 }
              });
              }else{
                this.$message({
                    showClose: true,
                    message: response.msg,
                    type: 'error'
               });
              }
            resolve()
          }).catch(error => {
            reject(error)
          })
        })
      }else {
         console.log('error submit!!');
         return false;
         }
      });

    },
      //提交修改
      setpush() {
        console.log(this.setform);
        return new Promise((resolve, reject) => {
          set({
            'customerId' : this.setform.customerId,
            'cusName':this.setform.cusName,
           'contacts':this.setform.contacts,
            'phone' :this.setform.phone,
            'address' :this.setform.address,
           //'qrCode' :this.setform.qrCode,
            'cardNo' :this.setform.cardNo,
            'state' :this.setform.state
          }).then(response => {
            console.log(response);
            if(response.data){
              this.$message({
                  message: response.msg,
                 type: 'success',
                onClose:  () =>{
                  location.reload();
                }
              });
              }else{
                this.$message({
                    showClose: true,
                    message: response.msg,
                    type: 'error'
               });
              }
            resolve()
          }).catch(error => {
            reject(error)
          })
        })
      },
      del(row) {
        this.$confirm('此操作将永久删除该客户信息, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(response => {
           return new Promise((resolve, reject) => {
             del({'customerId': row.customerId}).then(response => {
              if(response.data){
                this.$message({
                          message: response.msg,
                          type: 'success',
                          onClose:  () =>{
                            location.reload();
                          }
                        });
              }else{
                 this.$message.error(response.msg);
              }
               resolve()
             }).catch(error => {
               reject(error)
             })
           })
            resolve()
          }).catch(error => {
            reject(error)
          })
      },
      clearFilter() {
        this.$refs.filterTable.clearFilter();
      },
      filterTag(value, row) {
        return row.state === value;
      }
    }
  }
</script>

<style>

</style>
